<template>
	<view class="quee" :style="{width:`${width}rpx`,height:`${height}rpx`,overflow:'hidden'}">
	  <view class="no-text" :style="{position:'absolute',left:`${queeLeft}rpx`,top:0,fontSize:'28rpx'}">
	    <slot></slot>
	  </view> 
	</view>
</template>

<script>
	export default {
		name:"quee",
		props:{
			 width: {
			  type: [Number,String],
			  default: 700,
			},
			height: {
			  type: [Number,String],
			  default: 24
			}
		},
		data(){
			return {
				queeLeft: 0,
				timer: null
			}
		},
		created() {
			 let timer = setInterval( () => {
			  if (this.queeLeft <= (-this.width * 2)) {
				  this.queeLeft = this.width
			  }
			this.queeLeft = this.queeLeft-= 5
			}, 40);
			this.timer = timer
			console.log("是否开启定时器")
			console.log(this.timer)
		},
		beforeDestroy() {
			clearInterval(this.timer)
			this.timer = null
		}
	}
</script>

<style>
	.quee{
	  position:relative;
	}
	
	.no-text {
	  white-space : nowrap;
	  font-size: 24rpx;
	  font-family: PingFangSC, PingFangSC-Regular;
	  font-weight: 400;
	  text-align: left;
	  color: #ffa261;
	  line-height: 24rpx;
	}
</style>
